Confirm?

Are you sure you want to proceed?
h
hanie mirabbasi

Grand King Website Design

Clone & Customize via AI

Blazor Portfolio Page built with Tailwind CSS and RTL support, featuring an about section, animated skill bars, and experience entries in a responsive container.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Static portfolio layout with RTL direction and a top navigation bar. - About section, skills list with animated progress bars, and experience entries. - Reusable card-style sections using Tailwind utility classes and scoped CSS for progress animations. ## Key components - @page - HTML structural elements: nav, section, h2/h3, p, div - Tailwind utility classes: container, mx-auto, flex, space-y-*, rounded-lg, text-* - Scoped CSS file (Portfolio.razor.css) with animate-progress-* classes for progress widths ## How it works - The page uses the @page directive to register the route and renders static markup with Tailwind utility classes. - Skill bars are implemented as simple divs styled by utility classes; widths are applied via CSS classes (animate-progress-96, animate-progress-94, etc.) to create animated fills. - RTL layout is set at the root with dir="rtl"; navigation links use flex and spacing utilities with reversed spacing (space-x-reverse). - No data binding or server interactions are defined in this single-file component; content is static and suitable for binding to a model or service. ## Styling - Tailwind CSS utilities provide layout, spacing, colors, and typography. - Custom scoped CSS (Portfolio.razor.css) defines transition-based width rules for each skill percentage class. - Color palette uses dark backgrounds and a red accent; responsiveness relies on Tailwind container and flex utilities. ## Reuse steps 1. Install and configure Tailwind CSS in the Blazor project (or adapt classes to existing CSS framework). 2. Add this component to the Pages folder and keep the scoped CSS file alongside it. 3. Ensure the app supports RTL where required (set dir on layout or component). 4. Replace static text with models or injected services for dynamic content (inject services or use cascading parameters). 5. Optionally add interactive behavior (EditForm, @bind, event handlers) and wire data sources or API clients. ## Limitations & next steps - This is a single static page generated by Instruct UI; it does not include data services, authentication, or form handling. - No client-side state or componentization is provided; extract sections into child components for reuse. - Add localization, dynamic models, and unit tests; wire HTTP services or state management to populate experience and skills.